<template>
    <el-tabs v-model="activeName" class="flexClass">
        <el-tab-pane label="分配提成" name="first" style="height:100%">
            <div class="mainDiv">
                <el-table :data="tichenglist" style="width: 100%;" height="250" show-summary :summary-method="getSum">
                    <el-table-column prop="type" label="品项类型" width="98">
                        <template slot-scope="scope">
                            <el-tag size="mini" type="success" v-if="scope.row.type == 1">产品</el-tag>
                            <el-tag size="mini" type="warning" v-if="scope.row.type == 2">项目</el-tag>
                            <el-tag size="mini" type="primary" v-if="scope.row.type == 3">卡</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="typename" label="品项名称" width="130" :show-overflow-tooltip="showOwer"></el-table-column>
                    <el-table-column prop="consumetype" label="消费类型">
                        <template slot-scope="scope">
                            <el-tag size="mini" type="success" v-if="scope.row.consumetype == 1">普通消费</el-tag>
                            <el-tag size="mini" type="danger" v-else-if="scope.row.consumetype == 2">卡项消费</el-tag>
                            <el-tag size="mini" type="gray" v-else>暂存消费</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="原价"></el-table-column>
                    <el-table-column prop="num" label="数量">
                    </el-table-column>
                    <el-table-column prop="discount" label="折扣（0-1）" width="130">
                    </el-table-column>
                    <el-table-column prop="amount" label="小计">
                    </el-table-column>
                    <el-table-column prop="xianjinticheng" label="现金提成">
                    </el-table-column>
                    <el-table-column prop="kahaoticheng" label="卡耗提成">
                    </el-table-column>
                </el-table>
                <el-button type="primary" icon="plus" size="small" @click="adduser" style="margin:5px 0px; width: 80px">员工</el-button>
                <el-table :data="fenpeilist" style="width: 100%" show-summary :summary-method="getSummaries" height="100%">
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="xianjinyeji" label="现金业绩">
                    </el-table-column>
                    <el-table-column prop="kahaoyeji" label="卡耗业绩">
                    </el-table-column>
                    <el-table-column prop="xianjinticheng" label="现金提成">
                        <template slot-scope="scope">
                            <el-input size="small" style="width:90px" v-model="scope.row.xianjinticheng" v-show="scope.row.addtype == 0"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="kahaoticheng" label="卡耗提成">
                        <template slot-scope="scope">
                            <el-input size="small" style="width:90px" v-model="scope.row.kahaoticheng" v-show="scope.row.addtype == 0"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="qitaticheng" label="其他提成">
                        <template slot-scope="scope">
                            <el-input size="small" style="width:90px;margin:5px" v-model="scope.row.qitaticheng" v-show="scope.row.addtype == 1"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="xianjinjieti" label="现金阶梯提成">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" placement="top" v-show="scope.row.addtype == 0">
                                <div slot="content">
                                    <p v-for="items in scope.row.xianjinxinxi">{{items}}</p>
                                </div>
                                <el-input size="small" style="width:100px;margin:5px" v-model="scope.row.xianjinjieti"></el-input>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="kahaojieti" label="卡耗阶梯提成">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" placement="top" v-show="scope.row.addtype == 0">
                                <div slot="content">
                                    <p v-for="items in scope.row.kahaoxinxi">{{items}}</p>
                                </div>
                                <el-input size="small" style="width:100px;margin:5px" v-model="scope.row.kahaojieti"></el-input>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" @click="deleterow(scope.$index, fenpeilist)" :disabled="scope.row.addtype == 0">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="padding: 10px">
                    <el-button type="danger" class="fr" style="float: left;" @click="goto(1)">上一步</el-button>
                    <el-button style="float: left;" @click="dayin" v-qx="quanxian.dayin">打印</el-button>
                    <el-button type="primary" style="float: right" icon="upload2" @click="fenpeiticheng(0)" v-show="order.status == 1" v-qx="quanxian.fenpei">保存分配</el-button>
                    <el-button type="primary" style="float: right" @click="goto(3)" v-show="order.status == 2">下一步</el-button>
                    <el-button type="primary" style="float: right" @click="fenpeiticheng(1)" v-show="order.status == 2" v-qx="quanxian.chongxinfenpei">重新分配</el-button>
                    <el-button type="danger" style="float: right" @click="quxiaofenpei" v-show="order.status == 2" v-qx="quanxian.fanfenpei">取消分配</el-button>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="订单详情" name="second">
            <orderInfo :order="order"></orderInfo>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import C from '@/common/common.js'
import orderInfo from './orderInfo.vue'

export default {
  name: 'addOpenCard',
  props: ['order', 'tichenglist', 'fenpeilist'],
  data () {
    return {
      // 结账
      paylist: [],
      yejilist: [],
      // 杂项
      showOwer: true,
      activeName: 'first',
      quanxian: {
        add: 'opencards_add',
        jiezhang: 'opencards_jiezhang',
        fanjiezhang: 'opencards_fan',
        dayin: 'opencards_print',
        fenpei: 'opencards_fen',
        fanfenpei: 'opencards_fanfen',
        chongxinfenpei: 'opencards_chongxin'
      }
    }
  },
  methods: {
    deleterow: C.deleterow,
    getSum (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index == 7 || index == 8) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    adduser: async function () {
      let data = await C.openBrowserWindow('/selectAppUser', {}, {
        width: 1200,
        height: 860,
        transparent: true,
        frame: false,
        // openDevTools: true,
        useSpa: false,
        spaModel: 'shop'
      })
      if (data) {
        let ot = this.order.ordertype == 1 ? 'KKD' : this.order.ordertype == 2 ? 'LSD' : 'CZD'
        data.forEach((row) => {
          // 判断是否重复
          if (C.inarray({ userid: row.id }, this.fenpeilist) === -1) {
            this.fenpeilist.push({
              id: '',
              xianjintichengbi: 0,
              kahaotichengbi: 0,
              xianjinticheng: 0,
              kahaoticheng: 0,
              xianjinyeji: 0,
              kahaoyeji: 0,
              name: row.name,
              addtype: 1,
              orderid: this.order.id,
              userid: row.id,
              xiaozuid: row.xiaozuid,
              bumenid: row.bumenid,
              qitaticheng: 0,
              ordertype: ot,
              guestid: this.order.guestid,
              addtime: this.order.addtime,
              shopid: this.order.departmentid,
              fuwutype: 0,
              shougongticheng: 0
            })
          }
        })
      }
    },
    getSummaries: function (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }

        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = sums[index].toFixed(2)
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })
      return sums
    },
    fenpeiticheng: async function (r) {
      // 进行判断
      // return false
      let url = r ? '/shop/kaidancheck/chongxinfenpei' : '/shop/kaidancheck/fenpeiticheng'
      let data = { userinfo: JSON.stringify(this.fenpeilist), orderid: this.order.id, ordertype: this.order.ordertype }

      let e = false
      if (this.fenpeilist.length <= 0) {
        C.confirm('该单据将不产生任何提成，确定继续吗？', async () => {
          let res = await C.ajax(url, data, 'post')
          if (res) {
            C.success(res.data.info)
            this.goto(3)
          }
        })
      } else {
        this.fenpeilist.forEach((row) => {
          if (row.xianjinticheng < 0 || row.kahaoticheng < 0 || row.shougongticheng < 0 || row.qitaticheng < 0) e = true
        })
        if (e) {
          C.error('数据格式填写不正确')
          return false
        }
        let res = await C.ajax(url, data, 'post')
        if (res) {
          C.success(res.data.info)
          this.goto(3)
        }
      }
    },
    dayin: async function () {
      await C.openBrowserWindow('/printOpenCard', { id: this.order.id }, { width: 245, height: 900, useSpa: false, spaModel: 'print' })
    },
    quxiaofenpei: function () {
      C.confirm('确定要撤销吗？', async () => {
        let data = await C.ajax('/shop/kaidancheck/fanfenpeiticheng', { id: this.order.id }, 'post')
        if (data) {
          C.success(data.data.info)
          this.goto(2)
        }
      })
    },
    goto (index) {
      this.$emit('goto', {index: index})
    }
  },
  mounted: async function () {
  },
  components: { orderInfo }
}
</script>
<style>
.flexClass{
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}
.el-tabs__content{
    height: 100%;
}
</style>